import { useMemo } from "react"
import { useRecoilValue } from "recoil"
import { ligthDeg } from "../store/store"

export const useShadow = () => {
    const deg = useRecoilValue(ligthDeg)
    const [shadowX, shadowY, blur] = useMemo(() => {
        let shadowX = 0, shadowY = 0, blur = 6
        //第一象限
        if (deg >= 0 && deg <= 90) {
            shadowX = (90 - deg) / 3 //大->小
            shadowY = (deg - 0) / 3 //小->大
        }
        //第二象限
        if (deg > 90 && deg <= 180) {
            shadowX = -(deg - 90) / 3 // 小 ->大
            shadowY = (180 - deg) / 3 // 大->小
        }
        //第三象限
        if (deg > 180 && deg <= 270) {
            shadowX = -(270 - deg) / 3 //大 -> 小
            shadowY = -(deg - 180) / 3 // 小 -> 大
        }
        //第四象限
        if (deg > 270) {
            shadowX = (deg - 270) / 3 //小 -> 大
            shadowY = -(360 - deg) / 3 // 大 -> 小
        }


        blur = 1.2


        // console.log({ shadowX, shadowY, blur });

        return [shadowX, shadowY, blur]
    }, [deg])
    return [shadowX, shadowY, blur]
}